<script lang="ts" setup>
import { ref, reactive } from "vue";
import store1 from "../../store/index";
let store: any = store1();
let obj = defineProps(["myarr"]);
// const checked = ref(false)
var myid: number;
const onChange = (id: number) => {
  for (myid = 0; myid <= myarr.length - 1; myid++) {
    // console.log(myarr.length)
    myarr[myid].checked = false;
  }
  myarr[id].checked = !myarr[id].checked; //点什么什么亮
  store.initial_tag = ref(myarr[id].name);
  console.log(myarr[id].name);
};
var myarr = reactive(obj.myarr);
// function look (){
//     console.log(myarr.length)
// }
</script>
            
<template>
  <div>
    <el-check-tag
      :checked="el.checked"
      @change="onChange(el.id)"
      style="
        margin-right: 12px;
        margin-bottom: 12px;
        font-weight: 500;
        width: 100px;
        font-size: 13px;
        padding: 4px 0;
        text-align: center;
      "
      v-for="el in myarr"
      :key="el.id"
      >{{ el.name }}</el-check-tag
    >
  </div>

  <!-- <button @click="look">btn</button> -->
</template>
            
<style scoped>
.el-check-tag.is-checked {
  background-color: #67c23a !important;
  color: white !important;
}

.el-check-tag:hover {
  background-color: #67c23a !important;
  color: white !important;
}
</style>
            